<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的书签管理器</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: #f5f5f5;
      margin: 0;
      padding: 0;
      color: #333;
      font-size: 14px;
      line-height: 1.4;
    }

    .container {
      max-width: 100%;
      margin: 0;
      background: white;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .header {
      background: #fff;
      border-bottom: 1px solid #e0e0e0;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .header h1 {
      font-size: 20px;
      font-weight: 500;
      margin: 0;
      color: #333;
    }

    .header-actions {
      display: flex;
      gap: 8px;
    }

    .toolbar {
      padding: 16px 24px;
      background: #fafafa;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      flex-shrink: 0;
      position: sticky;
      top: 73px; /* header height + border */
      z-index: 99;
    }

    .search-box {
      flex: 1;
      min-width: 300px;
      padding: 8px 12px;
      border: 1px solid #d0d0d0;
      border-radius: 4px;
      font-size: 14px;
      background: white;
      transition: border-color 0.2s;
    }

    .search-box:focus {
      outline: none;
      border-color: #4285f4;
      box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
    }

    .filter-select {
      padding: 8px 12px;
      border: 1px solid #d0d0d0;
      border-radius: 4px;
      font-size: 14px;
      background: white;
      cursor: pointer;
      transition: border-color 0.2s;
      min-width: 120px;
    }

    .filter-select:focus {
      outline: none;
      border-color: #4285f4;
      box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
    }

    .btn {
      padding: 8px 16px;
      border: 1px solid #d0d0d0;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      transition: all 0.2s;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: white;
      color: #333;
    }

    .btn:hover {
      background: #f8f9fa;
      border-color: #b0b0b0;
    }

    .btn-primary {
      background: #4285f4;
      color: white;
      border-color: #4285f4;
    }

    .btn-primary:hover {
      background: #3367d6;
      border-color: #3367d6;
    }

    .btn-danger {
      background: #ea4335;
      color: white;
      border-color: #ea4335;
    }

    .btn-danger:hover {
      background: #d33b2c;
      border-color: #d33b2c;
    }

    .content {
      flex: 1;
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .stats {
      display: flex;
      gap: 24px;
      padding: 16px 24px;
      background: #f8f9fa;
      border-bottom: 1px solid #e0e0e0;
      flex-shrink: 0;
    }

    .stat-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stat-number {
      font-size: 16px;
      font-weight: 500;
      color: #4285f4;
    }

    .stat-label {
      font-size: 14px;
      color: #666;
    }

    .main-content {
      flex: 1;
      display: flex;
      overflow: hidden;
    }

    .sidebar {
      width: 300px;
      background: #f8f9fa;
      border-right: 1px solid #e0e0e0;
      overflow-y: auto;
      flex-shrink: 0;
    }

    .folder-tree {
      padding: 8px 0;
    }

    .folder-item {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      cursor: pointer;
      transition: background-color 0.1s;
      border-left: 3px solid transparent;
    }

    .folder-item:hover {
      background-color: #e9ecef;
    }

    .folder-item.active {
      background-color: #e3f2fd;
      border-left-color: #4285f4;
    }

    .folder-toggle {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      transition: background-color 0.2s;
      font-size: 12px;
      color: #666;
    }

    .folder-toggle:hover {
      background-color: #d0d0d0;
    }

    .folder-icon {
      margin-right: 8px;
      font-size: 16px;
    }

    .folder-name {
      flex: 1;
      font-size: 14px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .folder-children {
      margin-left: 16px;
    }

    .main-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .panel-header {
      padding: 16px 24px;
      background: #fff;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .panel-title-section {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .panel-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin: 0;
    }

    .panel-actions {
      display: flex;
      gap: 8px;
    }

    .bookmark-tree {
      flex: 1;
      background: white;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
    }

    .bookmark-item {
      display: flex;
      align-items: center;
      padding: 8px 24px;
      border-bottom: 1px solid #f0f0f0;
      transition: background-color 0.1s;
      min-height: 40px;
    }

    .bookmark-item:hover {
      background-color: #f8f9fa;
    }

    .bookmark-item:last-child {
      border-bottom: none;
    }

    /* 拖动排序样式 */
    .bookmark-item {
      cursor: move;
      transition: all 0.2s ease;
    }

    .bookmark-item.dragging {
      opacity: 0.5;
      transform: rotate(5deg);
      z-index: 1000;
      position: relative;
    }

    .bookmark-item.drag-over {
      border-top: 3px solid #4285f4;
      background-color: #e3f2fd;
    }

    .bookmark-item.drag-over-bottom {
      border-bottom: 3px solid #4285f4;
      background-color: #e3f2fd;
    }

    .drag-handle {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      cursor: move;
      opacity: 0.3;
      transition: opacity 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #666;
    }

    .bookmark-item:hover .drag-handle {
      opacity: 0.7;
    }

    .bookmark-item.dragging .drag-handle {
      opacity: 1;
    }

    .bookmark-item.folder-item {
      cursor: move;
      background-color: #f8f9fa;
    }

    .bookmark-item.folder-item:hover {
      background-color: #e9ecef;
    }

    .bookmark-item.folder-item .bookmark-content {
      cursor: pointer;
    }

    .bookmark-item.folder-item.active {
      background-color: #e3f2fd;
      border-left: 3px solid #4285f4;
    }

    .bookmark-icon {
      width: 16px;
      height: 16px;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .bookmark-content {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      position: relative;
    }

    .bookmark-title {
      font-weight: 400;
      color: #333;
      text-decoration: none;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 120px; /* 为按钮留出空间 */
    }

    .bookmark-title:hover {
      color: #4285f4;
    }

    .bookmark-url {
      color: #666;
      font-size: 13px;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-shrink: 0;
      margin-right: 140px; /* 为按钮留出更多空间 */
    }

    .bookmark-actions {
      display: flex;
      gap: 8px;
      opacity: 0;
      transition: opacity 0.2s;
      flex-shrink: 0;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background: white;
      padding: 6px;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .bookmark-item:hover .bookmark-actions {
      opacity: 1;
    }

    .action-btn {
      padding: 4px 8px;
      border: 1px solid #d0d0d0;
      border-radius: 3px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s;
      background: white;
      color: #333;
    }

    .action-btn:hover {
      background: #f8f9fa;
      border-color: #b0b0b0;
    }

    .action-btn-edit:hover {
      background: #fff3cd;
      border-color: #ffc107;
    }

    .action-btn-delete:hover {
      background: #f8d7da;
      border-color: #dc3545;
      color: #721c24;
    }

    .action-btn-hide:hover {
      background: #d1ecf1;
      border-color: #17a2b8;
      color: #0c5460;
    }

    .hidden-bookmark {
      opacity: 0.6;
      background-color: #f8f9fa;
    }

    .hidden-bookmark .bookmark-title {
      color: #6c757d;
    }

    .hidden-folder {
      opacity: 0.6;
      background-color: #f8f9fa;
    }

    .hidden-folder .folder-name {
      color: #6c757d;
    }

    /* 搜索高亮样式 */
    mark {
      background-color: #ffeb3b;
      color: #333;
      padding: 1px 2px;
      border-radius: 2px;
    }

    /* 配置对话框样式 */
    .modal {
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-content {
      background: white;
      border-radius: 8px;
      width: 90%;
      max-width: 500px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .modal-header {
      padding: 20px 24px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .modal-header h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
    }

    .close {
      font-size: 24px;
      font-weight: bold;
      cursor: pointer;
      color: #666;
    }

    .close:hover {
      color: #333;
    }

    .modal-body {
      padding: 24px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: #333;
    }

    .form-group input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #d0d0d0;
      border-radius: 4px;
      font-size: 14px;
      transition: border-color 0.2s;
    }

    .form-group input:focus {
      outline: none;
      border-color: #4285f4;
      box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
    }

    .form-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      margin-top: 24px;
    }

    .folder-toggle {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      transition: background-color 0.2s;
      font-size: 12px;
      color: #666;
    }

    .folder-toggle:hover {
      background-color: #e9ecef;
    }

    .folder-children {
      margin-left: 16px;
      border-left: 1px solid #e0e0e0;
    }

    .loading {
      text-align: center;
      padding: 40px;
      color: #666;
      font-size: 14px;
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #666;
    }

    .empty-state h3 {
      margin-bottom: 8px;
      color: #333;
      font-size: 16px;
      font-weight: 400;
    }

    .empty-state p {
      font-size: 14px;
      margin: 0;
    }

    /* 返回按钮样式 */
    .back-button {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border: 1px solid #d0d0d0;
      border-radius: 4px;
      background: white;
      color: #333;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
      text-decoration: none;
      height: 32px;
    }

    .back-button:hover {
      background: #f8f9fa;
      border-color: #b0b0b0;
      color: #4285f4;
    }

    .back-icon {
      font-size: 14px;
      font-weight: bold;
    }

    .back-text {
      font-weight: 400;
    }

    /* 文件夹样式 */
    .bookmark-item[data-type="folder"] {
      background: #f8f9fa;
      font-weight: 500;
    }

    .bookmark-item[data-type="folder"]:hover {
      background: #e9ecef;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .header {
        padding: 12px 16px;
      }

      .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 16px;
        top: 57px; /* 调整移动端 header 高度 */
      }

      .search-box {
        min-width: auto;
      }

      .bookmark-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }

      .bookmark-url {
        max-width: 100%;
      }

      .stats {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
      }

      .bookmark-item {
        padding: 8px 16px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>书签管理器</h1>
      <div class="header-actions">
        <button class="btn" id="configBtn">⚙️ 配置</button>
        <button class="btn" id="refreshBtn">🔄 刷新</button>
        <button class="btn btn-primary" id="addBookmarkBtn">+ 添加书签</button>
      </div>
    </div>

    <div class="toolbar">
      <input type="text" class="search-box" id="searchInput" placeholder="搜索书签...">
      <select class="filter-select" id="filterSelect">
        <option value="all">显示所有</option>
        <option value="visible">只显示可见</option>
        <option value="hidden">只显示隐藏</option>
      </select>
      <button class="btn" id="exportBtn">📤 导出</button>
    </div>

    <div class="content">
      <div class="stats" id="statsContainer">
        <div class="stat-item">
          <span class="stat-number" id="totalBookmarks">0</span>
          <span class="stat-label">书签</span>
        </div>
        <div class="stat-item">
          <span class="stat-number" id="totalFolders">0</span>
          <span class="stat-label">文件夹</span>
        </div>
        <div class="stat-item">
          <span class="stat-number" id="recentBookmarks">0</span>
          <span class="stat-label">最近添加</span>
        </div>
      </div>

      <div class="main-content">
        <div class="sidebar">
          <div class="folder-tree" id="folderTree">
            <div class="loading">加载中...</div>
          </div>
        </div>

        <div class="main-panel">
          <div class="panel-header">
            <div class="panel-title-section">
              <button class="back-button" id="backButton" style="display: none;">
                <span class="back-icon">←</span>
                <span class="back-text">返回</span>
              </button>
              <h3 class="panel-title" id="panelTitle">选择文件夹</h3>
            </div>
            <div class="panel-actions">
              <button class="btn" id="addBookmarkToFolderBtn">+ 添加书签</button>
            </div>
          </div>
          <div class="bookmark-tree" id="bookmarkTree">
            <div class="empty-state">
              <h3>选择一个文件夹</h3>
              <p>从左侧选择一个文件夹来查看其中的书签</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 配置对话框 -->
  <div id="configModal" class="modal" style="display: none;">
    <div class="modal-content">
      <div class="modal-header">
        <h3>Gitee 仓库配置</h3>
        <span class="close" id="closeConfigModal">&times;</span>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="giteeOwner">Gitee 用户名:</label>
          <input type="text" id="giteeOwner" placeholder="输入你的Gitee用户名">
        </div>
        <div class="form-group">
          <label for="giteeRepo">仓库名:</label>
          <input type="text" id="giteeRepo" placeholder="输入仓库名">
        </div>
        <div class="form-group">
          <label for="giteeToken">访问令牌:</label>
          <input type="password" id="giteeToken" placeholder="输入你的Gitee访问令牌">
        </div>
        <div class="form-actions">
          <button class="btn btn-primary" id="saveConfigBtn">保存配置</button>
          <button class="btn" id="cancelConfigBtn">取消</button>
        </div>
      </div>
    </div>
  </div>

  <script src="bookmark-manager-js.js"></script>
</body>
</html>
